﻿<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>02.GeoLocation</title>
    <script src="scripts/jquery-1.6.2.js"></script>
    <script src="scripts/modernizr-latest.js"></script>

    <script src="scripts/webshims-stable/js-webshim/minified/polyfiller.js"></script>

    <!-- API key from W3Schools -->
    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=true"> 
</script>
</head>

<body>
    <p>
        If the Geolocation doesn't work, open it thrugh a server(on a server). For example open it through Visual Studio with IIS, or upload it to a
        server and then open it.
    </p>
<button onclick="showMap()">Show map</button>

    <script>
        $.webshims.polyfill('geolocation'); //set polyfill with geolocation

        function showMap() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(setMapSettings);
            }
        }

        function setMapSettings(position) {

            //set map properties
            var mapProp = {
                center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude), //set the current position
                zoom: 13, //adjust the zoom of the map
                mapTypeId: google.maps.MapTypeId.ROADMAP //set map type
            };

            //initialize map
            var map = new google.maps.Map(document.getElementById("googleMap")
              , mapProp);

            //set the latitude and longitude
            var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

            //set the marker variable to the latlng position 
            var marker = new google.maps.Marker({
                position: latlng
            });

            //set marker
            marker.setMap(map);

        }

        google.maps.event.addDomListener(window, 'load', setMapSettings);
    </script>

    <div id="googleMap" style="width:100%; height:500px;"></div>
</body>
</html>